<template>
  <div>
    <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700">
      <div class="drawer_box">
        <div class="drawer_title">
          <div class="drawer_t">
            <div class="drawer_t_l">
              <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png" />
              查看退款信息
            </div>
            <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
              @click="drawer = false" />
          </div>
        </div>
        <div class="drawer_content">
          <div class="title title-flex">
            订单信息
            <div class="states">
              {{ messageList.Status || messageList.STATUS }}
            </div>
          </div>
          <div class="block">
            <div class="content-box">
              <div class="label">订单编号:</div>
              <div class="desc">
                {{ messageList.Code || messageList.PayCode }}
              </div>
            </div>
            <div class="content-box">
              <div class="label">权益名称:</div>
              <div class="desc name" @click="handleShowDetail">
                {{ messageList.EquityName || messageList.Name }}
              </div>
            </div>
            <div class="content-box" v-if="messageList.TypeID == 2">
              <div class="label">包含权益:</div>
              <div class="desc">
                <div class="rightsList">
                  <div class="rights_son_box" v-if="alreadyList && alreadyList != false">
                    <div class="rights_son" v-for="item in alreadyList" :key="item.ID">
                      <div class="rights_son_title">{{ item.Name }}</div>
                    </div>
                  </div>
                  <div class="rights_son_box" v-if="buyList && buyList != false">
                    <div class="rights_son" v-for="item in buyList" :key="item.ID">
                      <div class="rights_son_title">{{ item.Name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content-box">
              <div class="label">卖家:</div>
              <div class="desc">
                {{ messageList.PurchaseCompanyName || messageList.CompanyIDName }}
              </div>
            </div>
            <div class="content-box">
              <div class="label">买家:</div>
              <div class="desc">{{ messageList.PurchaseName }}</div>
            </div>
            <div class="content-box">
              <div class="label">售后原因:</div>
              <div class="desc">{{ messageList.RefundReasons }}</div>
            </div>
            <!-- <div class="content-box">
              <div class="label">申请退货数量:</div>
              <div class="desc">{{ messageList.RefundQuantity }}</div>
            </div> -->
            <div class="content-box">
              <div class="label">应退金额(元):</div>
              <div class="desc">
                {{ messageList.RefundAmount }}
              </div>
            </div>
            <div class="content-box">
              <div class="label">手续费(元):</div>
              <div class="desc">
                {{ messageList.RefundCharge }}
              </div>
            </div>

            <div class="content-box">
              <div class="label">购买数量:</div>
              <div class="desc">
                {{ messageList.Quantity || messageList.BuyQuantity }}
              </div>
            </div>
            <div class="content-box">
              <div class="label">购买金额(元):</div>
              <div class="desc">{{ messageList.UserPayTotalPrice }}</div>
            </div>
            <div class="content-box">
              <div class="label">退货渠道:</div>
              <div class="desc">{{ messageList.RefundPlatformID }}</div>
            </div>
            <div class="content-box">
              <div class="label">申请退款金额(元):</div>
              <div class="desc">
                {{ messageList.Amount || messageList.RefundAmount }}
              </div>
            </div>
            <div class="content-box">
              <div class="label">申请退货数量:</div>
              <div class="desc">{{ messageList.RefundQuantity }}</div>
            </div>
            <div class="content-box">
              <div class="label">申请退货时间:</div>
              <div class="desc">
                {{ messageList.RefundCreateTime || messageList.RefundTime }}
              </div>
            </div>
            <div class="content-box">
              <div class="label">下单时间:</div>
              <div class="desc">
                {{ messageList.CreateTime || messageList.PurchaseTime }}
              </div>
            </div>
            <div class="content-box" v-if="messageList.RefundTime">
              <div class="label">到账时间:</div>
              <div class="desc">
                {{ messageList.RefundTime }}
              </div>
            </div>

            <block v-if="messageList.TypeID == 2">
              <div v-for="item in infoList" :key="item.ID"
                style="border: 1px solid #000;border-radius: 10px;margin-bottom: 10px;">
                <div class="content-box">
                  <div class="label">权益名称:</div>
                  <div class="desc">{{ item.Name }}</div>
                </div>
                <div class="content-box">
                  <div class="label">申请退货数量:</div>
                  <div class="desc">{{ item.Quantity }}</div>
                </div>
                <div class="content-box">
                  <div class="label">手续费（元）:</div>
                  <div class="desc">{{ item.RefundCharge }}</div>
                </div>
                <div class="content-box">
                  <div class="label">应退金额:</div>
                  <div class="desc">{{ item.RefundAmount }}</div>
                </div>
                <div class="content-box">
                  <div class="label">售后原因:</div>
                  <div class="desc">{{ item.RefundReasons }}</div>
                </div>
                <div class="content-box">
                  <div class="label">服务方:</div>
                  <div class="desc">{{ item.CompanyIDName }}</div>
                </div>
              </div>
            </block>
          </div>
          <hr />
          <!-- 审核历史 -->
          <div class="title">审核历史</div>
          <div class="history" v-if="historyData != false">
            <div class="audit-item" v-for="item in historyData" :key="item.ID">
              <div class="audit-left"></div>
              <div class="audit-right">
                <div class="audit-right-box">
                  <div class="tag" :class="{
                    success: [4, 6, 7].includes(
                      item.STATUSID || item.StatusID
                    ),
                    error: [3, 5].includes(item.STATUSID || item.StatusID),
                    info: [1, 2].includes(item.STATUSID || item.StatusID)
                  }">
                    {{ item.Status || item.STATUSID }}
                  </div>
                  <div class="text">{{ item.Opinions }}</div>
                </div>
                <div class="audit-right-box">
                  <div class="date">{{ item.CreateTime }}</div>
                  <div class="approver">{{ item.CreateUserID }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="isDisabled(messageList)">
            <div class="title mt-20">审核意见</div>
            <div class="content-box">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="textarea">
              </el-input>
            </div>
          </div>
        </div>

        <div class="drawer_footer" v-if="isDisabled(messageList)">
          <div class="footer-btn reject" @click="submit(0)" v-if="orderType == 1 || orderType == 3">
            驳回
          </div>
          <div class="footer-btn" @click="submit(1)" v-if="orderType == 1 || orderType == 2">
            通过
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 权益详情 -->
    <rights-detail :octopus="octopus" ref="rightsDetail"></rights-detail>
  </div>
</template>

<script>
import orderStatus from "../../../../../static/skin/default/base/js/orderStatus";
import rightsDetail from "./rightsDetail.vue";
export default {
  name: "look_dialog",
  components: { rightsDetail },
  props: {
    orderType: {
      type: [String, Number],
      default: 1 // 1查看 2审核通过 3审核驳回
    },
    messageList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      textarea: "",
      historyData: [],
      states: {
        name: "订单状态",
        is_index: 0,
        is_type: "",
        arr: orderStatus
      },
      total: 0,
      currentPage: 1, //当前页
      pageSize: 10, // 每页显示条数
      SendCarList: [],
      peopleData: [],
      buyList: [],
      alreadyList: [],
      infoList: []
    };
  },
  computed: {},
  watch: {
    drawer(v) {
      if (v) {
      }
    }
  },
  methods: {
    isDisabled(row) {
      return (
        (row.BtnStatusID == 1 &&
          this.octopus.passport.authorization.company == 1) ||
        (row.BtnStatusID == 5 && this.octopus.passport.authorization.company != 1)
      );
    },
    drawerOp(id, page) {
      this.drawer = true;
      this.buyList = [];
      this.alreadyList = [];
      if (this.messageList.TypeID == 2) {
        this.getCompileData().then(res => {
          res.map(v => {
            if (v.CompanyID == this.messageList.CompanyID) {
              this.alreadyList.push(v);
            } else {
              this.buyList.push(v);
            }
          });
        });
        this.api_1402();
      }
      this.getRefundHistory(id);
    },
    changeTab(e) {
      this.tabID = e;
    },
    submit(type) {

      if (!this.textarea.trim()) {
        this.$message.error("请输入审核意见");
        return;
      }
      let text = type == 0 ? "驳回" : "通过";
      this.$confirm(`是否${text}退款申请?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        if (res == "confirm") {
          this.audit(type);
        }
      });
    },
    async audit(type) {
      // if(this.messageList.STATUSID == 4 && this.octopus.passport.authorization.company != 1){
      //   this.$message.success("请等待超满亿审核通过后再审核。");
      //   return
      // }


      let Status = 0;

      if (this.octopus.passport.authorization.company == 1) {
        // 判断商户 是否需要二次确认， 1 需要 传[3,4] ， 0 不需要 传[5,6]
        // if (this.messageList.IsRefundAudit == 1) {
        //   type == 1 && (Status = 4);
        //   type == 0 && (Status = 3);
        // } else {
        //   type == 1 && (Status = 6);
        //   type == 0 && (Status = 5);
        // }
        type == 1 && (Status = 4);
        type == 0 && (Status = 3);
      } else {
        type == 1 && (Status = 6); //TODO: 商家审核暂时有问题, 先审核流程走通    商家审核: Status = 4
        type == 0 && (Status = 5); //TODO: 商家审核暂时有问题, 先审核流程走通    商家审核: Status = 3
      }
      // 集团审批 需要二次审批 发给 卖家 ，不需要二次审批 发给买家
      let ID = ''
      if (this.messageList.IsRefundAudit == 1 && this.octopus.passport.authorization.company == 1) {
        ID = this.messageList.CompanyID
      } else {
        ID = this.messageList.MerchantID
      }
      if (Status == 6 || Status == 4) {
        await this.updateRefundBase(Status);
        if (this.messageList.IsRefundAudit == 1 && this.octopus.passport.authorization.company == 1) {
          this.createRefundHistory(Status);
          this.$message.success("审批通过,等待商家审核。");
          this.drawer = false;
          this.$emit("refresh");

        } else {
            this.tradeRefund(Status, () => this.createRefundHistory(Status));
        }

        if (this.messageList.TradeTypeID == 1) {
          let ID = '';
          if (this.messageList.IsRefundAudit == 1) {
            ID = this.messageList.CompanyID
          } else {
            ID = this.messageList.MerchantID
          }
          // 获取用户组
          this.$utils.getGroupInfo(this, '超级管理员,高级管理员,业务管理员', ID).then((res) => {
            console.log('发送消息的用户组：', res);
            // 发送消息 传值说明 模版ID ，消息类型 ，消息里的字段 ，创建用户ID，接收公司ID，接收群组ID
            res.length > 0 && this.$utils.sendMessageMulti(9, 2, { EquityName: this.messageList.Name }, this.octopus.passport.id, ID, res, this);
          });
        } else {
          // 发送消息 to C, 传值说明 模版ID ，消息类型 ，消息里的字段 ，创建用户ID，接收人ID
          this.$utils.sendMessageAlone(27, 2, {  PayCode: this.messageList.Code, EquityName: this.messageList.Name, Number: this.messageList.Quantity,Price:this.messageList.RefundAmount }, this.octopus.passport.id, this.messageList.PurchaserID, this);
        }



      } else {
        this.updateRefundBase(Status, true);
        this.createRefundHistory(Status);

        if (this.messageList.TradeTypeID == 1) {
          // 获取用户组
          this.$utils.getGroupInfo(this, '超级管理员,高级管理员,业务管理员', this.messageList.MerchantID).then((res) => {
            console.log('发送消息的用户组：', res);
            // 发送消息 传值说明 模版ID ，消息类型 ，消息里的字段 ，创建用户ID，接收公司ID，接收群组ID
            res.length > 0 && this.$utils.sendMessageMulti(10, 2, { EquityName: this.messageList.Name }, this.octopus.passport.id, this.messageList.MerchantID, res, this)
          });
        } else {
          // 发送消息 to C, 传值说明 模版ID ，消息类型 ，消息里的字段 ，创建用户ID，接收人ID
          this.$utils.sendMessageAlone(28, 2, { PayCode: this.messageList.Code, EquityName: this.messageList.Name, Number: this.messageList.Quantity }, this.octopus.passport.id, this.messageList.PurchaserID, this);
        }
      }
    },

    // 使用人列表
    getUseCount() {
      let o = this;
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1237,
          cellData: [
            { name: "ID" }, // ID
            { name: "IdentityNumber" }, // 证件号码
            { name: "Mobile" }, // 联系方式
            { name: "Name" }, // 姓名
            { name: "PurchaseID" }, // 订单
            { name: "TypeID" }, // 证件类型
            { name: "TypeIDName" } // 证件类型
          ],
          paramData: {
            ID: this.messageList.ID
          },
          pageData: {
            index: this.currentPage,
            rowSize: this.pageSize
          }
        },
        data => {
          if (data.status.code == 200) {
            this.peopleData = data.content.queryData;
            this.total = data.content.pageData.totalRows;
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUseCount();
    },
    // 获取退款审核历史
    getRefundHistory(id) {
      let o = this;
      o.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1229,
          cellData: [
            { name: "CreateTime" }, // 申请时间
            { name: "CreateUserID" }, // 审核人
            { name: "ID" }, // ID
            { name: "Opinions" }, // 审核意见
            { name: "RefundID" }, // 退款ID
            { name: "Status" }, // 退款状态
            { name: "StatusID" } // StatusID
          ],
          paramData: {
            PurchaseID: id
          }
        },
        function (data) {
          if (data.status.code == 200) {
            o.historyData = data.content.queryData;
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },

    // 创建退款审核历史记录
    createRefundHistory(Status) {
      let o = this;
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1218,
          type: "CREATE",
          cellData: [
            {
              name: "CreateTime",
              defaultValue:
                new Date().toJSON().substring(0, 10) +
                " " +
                new Date().toTimeString().substring(0, 8)
            }, // 时间
            { name: "CreateUserID", defaultValue: this.octopus.passport.id }, // 审核人
            { name: "Opinions", defaultValue: this.textarea }, // 意见
            { name: "RefundID", defaultValue: this.messageList.RefundID }, // 退款表ID
            { name: "Status", defaultValue: Status } // 退款状态
          ]
        },
        function (data) {
          if (data.status.code == 200) {
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },

    // 更新订单退款数据源
    updateRefundBase(Status, type = false) {
      return new Promise((resolve, reject) => {
        this.octopus.request.api.post(
          "/Octopus/Engine/Item",
          {
            id: 1203,
            type: "UPDATE",
            value: this.messageList.RefundID,
            cellData: [
              { name: "Status", defaultValue: Status } // 状态
            ]
          },
          data => {
            if (data.status.code == 200) {
              this.drawer = false;
              this.$emit("refresh");
              type && this.release();
              resolve();
            } else {
              this.octopus.tips.error(data);
              reject();
            }
          }
        );
      });
    },

    // 退款
    tradeRefund(Status, callback) {
      this.octopus.tools.openAPI(
        "/ESB/AIGC/Trade/Refund",
        {
          equityID: this.messageList.EquityID,
          tradeCode: this.messageList.PayCode,
          outRefundCode: this.messageList.OutRefundCode,
          refundID: this.messageList.RefundID,
          purchaseID: this.messageList.PurchaseID
        },
        data => {
          if (data.content.status.code == 200) {
            callback && callback();
            this.$message.success(Status == 5 ? "退款已驳回" : "退款已通过");
            this.drawer = false;
            this.$emit("refresh");
          } else {
            this.octopus.tips.error(data.status.message);
            this.updateRefundBase(this.messageList.StatusID);
          }
        }
      );
      // this.octopus.request.api.post("/ESB/Services/Tools/Data/Get", {
      //     requestType: "POST_JSON", // POST_JSON
      //     url: "http://wxzf001.natapp1.cc/ESB/AIGC/Trade/Refund",
      //     params: {
      //         equityID: this.messageList.EquityID,
      //         tradeCode: this.messageList.PayCode,
      //         outRefundCode: this.messageList.OutRefundCode,
      //     }
      // }, (apiData) => {
      //     if (apiData.content.response.status.code == 200) {
      //         callback && callback()
      //         this.$message.success(Status == 5 ? '退款已驳回' : '退款已通过')
      //         this.drawer = false
      //         this.$emit('refresh')
      //     } else {
      //         this.octopus.tips.error(apiData.content.response.content)
      //         this.updateRefundBase(this.messageList.StatusID)
      //     }
      // })
    },

    // 获取派车信息
    getSendCarInfo() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1234,
          cellData: [
            { name: "BrandID" }, // BrandID
            { name: "BrandIDName" }, // BrandIDName
            { name: "CarCode" }, // 车牌
            { name: "CarID" }, // 车辆ID
            { name: "ContactID" }, // 司机
            { name: "ContactIDName" }, // 司机
            { name: "ID" }, // 订单ID
            { name: "InventoryDetailID" }, // 库存明细ID
            { name: "Mobile" }, // 司机手机号
            { name: "SystemID" }, // SystemID
            { name: "SystemIDName" }, // SystemIDName
            { name: "TypeID" }, // 车系
            { name: "TypeIDName" } // 车系
          ],
          paramData: {
            ID: this.messageList.ID
          }
        },
        data => {
          if (data.status.code == 200) {
            this.SendCarList = data.content.queryData;
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },

    handleShowDetail() {
      this.$refs.rightsDetail.init(this.messageList.EquityID);
      this.$refs.rightsDetail.drawerOp(this.alreadyList, this.buyList);
    },

    generateRandomString(length) {
      let result = "";
      const characters =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      for (let i = 0; i < length; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * characters.length)
        );
      }
      return result;
    },
    // 获取权益详情
    getCompileData() {
      return new Promise((resolve, reject) => {
        let o = this;
        o.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1184,
            cellData: [
              { name: "CostPrice" }, // 平台价格
              { name: "CompanyID" }, // 子权益公司ID
              { name: "FlagList" }, // 权益标签
              { name: "FlagListName" }, // 权益标签
              { name: "ID" }, // ID
              { name: "Name" }, // 权益标题
              { name: "SalePrice" }, // 市场价格
              { name: "SoldQuantity" }, // 已售数量
              { name: "TypeID" }, // 权益类型
              { name: "ExpireTime" }, // 到期时间
              { name: "EffectiveTime" }, // 生效时间
              { name: "InventoryQuantity" }, // 库存数量
              { name: "SoldQuantity" }, // 已售数量
              { name: "EquityCount" }, // 权益数量
              { name: "EquityServiceRate" }, // 小程序服务费
              { name: "PlatformServiceRate" }, // 平台服务费
              { name: "UserCount" } // 使用人数
            ],
            paramData: {
              ID: o.messageList.EquityID
            }
          },
          data => {
            if (data.status.code == 200) {
              resolve(data.content.queryData);
            } else {
              o.octopus.tips.error(data);
              reject(false);
            }
          }
        );
      });
    },
    //组合权益子权益退款详情
    api_1402() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1402,
          cellData: [
            { name: "ID" }, // ID
            { name: "Name" }, // 权益名称
            { name: "Quantity" }, // 退款数量
            { name: "RefundAmount" }, // 退款金额
            { name: "RefundCharge" }, // 退款手续费
            { name: "RefundID" }, // 退款主表id
            { name: "RefundReasons" }, // 退款原因
            { name: "CompanyIDName" } // 服务方
          ],
          paramData: {
            RefundID: this.messageList.ID
          }
        },
        data => {
          if (data.status.code == 200) {
            this.infoList = data.content.queryData;
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    // 驳回，释放库存
    release() {
      this.octopus.tools.openAPI(
        "/ESB/AIGC/Refund/Release",
        {
          PurchaseID: this.messageList.PID, // 订单ID
          UserID: this.octopus.passport.id, // 操作人ID
          RefundID: this.messageList.RefundID, // 退款表的ID
          EquityID: this.messageList.EquityID // 订单表中的权益
        },
        datas => {
          if (datas.content.status.code == 200) {
            this.$message.success("驳回成功。");
            try {
              this.objInfo = JSON.parse(datas.content.content);
            } catch (e) { }
          } else {
            this.octopus.tips.error(datas.content.status.message);
          }
        }
      );
    }
  }
};
</script>
<style scoped>
.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 8rem);
  display: flex;
  flex-direction: column;
}

.mt-20 {
  margin-top: 20px;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 13rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .title-flex {
  display: flex;
  align-items: center;
}

.drawer_content .title2 {
  font-size: 1.8rem;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.content-box {
  display: flex;
  align-items: center;
  margin: 2rem 0 2rem 2em;
}

.mt-10 {
  margin-top: 20px;
}

.content-box .label {
  width: 25%;
}

.content-box .label .label-bold {
  font-size: 1.8rem;
  font-weight: bold;
}

.content-box .desc {
  /* flex: 1; */
  display: flex;
  flex-direction: row;
  align-items: center;
}

.name {
  color: #288ffd;
  text-decoration: underline;
  cursor: pointer;
}

.states {
  padding: 4px 6px;
  border: 1px solid #000;
  border-radius: 5px;
  margin-left: 4px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  margin-right: 15px;
  border-radius: 2px;
  /* border: 1px solid #43b4ff; */
  color: #43b4ff;
  padding: 1px 2px;
  font-size: 1rem;
}

.form-item {
  display: flex;
  align-items: center;
  width: 100%;
}

.form-item .label {
  width: 25%;
  display: flex;
  align-items: center;
}

.form-item .input {
  width: 100%;
  height: 5rem;
  line-height: 5rem;
  padding: 0 2rem;
  border: 1px solid #f3e8e2;
  border-radius: 1rem;
}

.form-item>>>.el-select {
  width: 100%;
  height: 4.5rem;
  line-height: 5rem;
}

.form-item>>>.el-select .el-input {
  width: 100%;
  height: 4.5rem;
}

.form-item>>>.el-select .el-input__inner {
  cursor: pointer;
  padding-right: 35px;
  height: 100%;
  font-size: 1.8rem;
}

.form-item>>>.el-input__icon {
  line-height: 3.5rem;
}

.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 4vh;
  padding: 0 30px;
  margin: 0 30px;
}

.btn div {
  background: #ff8b0f;
  color: #fff;
  padding: 10px 30px;
  border-radius: 20px;
  cursor: pointer;
}

.end {
  display: flex;
  justify-content: flex-end;
}

>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff8a36;
}

.drawer_footer {
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

.drawer_footer .footer-btn {
  line-height: 4rem;
  background-color: #f78c51;
  color: #fff;
  margin: 0 1rem;
  padding: 0 3rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.drawer_footer .reject {
  background-color: #2e3037;
}

.history {
  margin-left: 2em;
  margin-top: 1em;
}

.history .audit-item {
  display: flex;
}

.history .audit-item .audit-left {
  position: relative;
  width: 2px;
  height: 60px;
  border-radius: 4px;
  background-color: #dfdfdf;
}

.history .audit-item .audit-left::before {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff8755;
}

.history .audit-item .audit-right {
  margin-left: 16px;
}

.history .audit-item .audit-right .audit-right-box {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.history .audit-item .audit-right .audit-right-box:not(:first-child) {
  margin-top: 8px;
}

.history .audit-item .audit-right .audit-right-box .tag {
  font-size: 1em;
  padding: 1px 2px;
  color: #fff;
  border-radius: 2px;
  margin-right: 6px;
  background-color: #43b4ff;
}

.history .audit-item .audit-right .audit-right-box .tag.success {
  background-color: #3fdf72;
}

.history .audit-item .audit-right .audit-right-box .tag.info {
  background-color: #43b4ff;
}

.history .audit-item .audit-right .audit-right-box .tag.error {
  background-color: #f75352;
}

.history .audit-item .audit-right .audit-right-box .date {
  margin-right: 6px;
}

.drawer_footer {
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

.drawer_footer .footer-btn {
  line-height: 4rem;
  background-color: #f78c51;
  color: #fff;
  margin: 0 1rem;
  padding: 0 3rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.drawer_footer .reject {
  background-color: #2e3037;
}
</style>
